<template>
    <div style="height:100%">
        <div class="Top">
            <span style="float:left">
                <router-link to="/myself">
                    <b>
                        <i class="iconfont icon-xiangzuojiantou"></i>
                    </b>
                </router-link>
            </span>
            <h3 style="text-align: center;">
                <b>编辑个人资料</b>
            </h3>
        </div>
        <div class="headimg">
            <div class="headimgdiv">
                <img id="personformationimg" style="width:100%;height:100%;border-radius:50%" src="" alt="头像"> 
            </div>

            <p class="changebtn">
                <span>
                    <i style="color:#1296db" class="iconfont icon-zhaoxiangji"></i>
                </span>
                <span>
                    <button @click="changeheadimg()"  class="changeallimg">
                        更换头像
                    </button>

                        <van-popup v-model="headimg" position="bottom" :style="{ height: '30%' }">
                        <div>
                            <!-- 用一个图片代替上传文件 -->

                            <input name="img" id="headimginput" type="file" placeholder="请选择图片"/>
                            <input style="display:none" value="30" id="changeheadimguserid"/>
                            <!-- 在这里写一个弹出框,进行修改 -->
                            <p>
                            <button class="btn" style="    margin-left: 40%;"  @click="hideheadimg()">取消</button>
                            <button class="btn"  @click="uploadImg()">确认</button>
                            </p>
                        </div>
                        </van-popup>

                     <iframe name="headimhiframe" style="display: none;"></iframe>
                </span>
            </p>


        </div>
        <div class="personmessage">
            
        <!--年龄-->
            <div>
                <select id="age" style="width: 100%;height: 80%;border: none;background-color: white;outline: none;">
                    <option>请选择年龄</option>
                    <option value="10">年龄:10</option>
                    <option value="20">年龄:20</option>
                    <option value="30">年龄:30</option>
                </select>
            </div>

            <!-- 学校 -->
            <div>
                <select id="school" style="width: 100%;height: 80%;border: none;background-color: white;outline: none;">
                    <option value="请选择">请选择学校</option>
                    <option value="河南科技学院">河南科技学院</option>
                    <option value="河南师范大学">河南师范大学</option>
                    <option value="河南理工大学">河南科技学院</option>
                    <option value="郑州大学">河南师范大学</option>
                    <option value="河南农业大学">河南科技学院</option>
                    <option value="河南科技大学">河南师范大学</option>
                </select>
            </div>



            <!-- 生日 -->
            <!-- <div>
                <b>
                    <p>
                        <span>
                            <van-cell is-link @click="showPopup">请选择生日</van-cell>
                            <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
                                <birsthday></birsthday>
                                <school></school>
                            </van-popup>
                        </span>
                    </p>
                </b>
            </div> -->





            <!-- 性别 -->
            <div>
                <gender></gender>
            </div>
            <!-- 昵称 -->
            <div style="margin-top: 0.5rem;">
                    <p>
                        <span class="personmessagetext">
                            昵称
                        </span>
                        <span>
                            <input style="text-align:center" id="nickname" placeholder="请输入昵称"/>
                        </span>
                        <span>
                            <button id="yeseditnickname" @click="yesnickname()" style="display:none;background-color: white;border: none;color: skyblue;float: right;">
                                确定
                            </button>
                            <button id="editnickname" @click="editnickname()" style="margin-right:2%;background-color: white;border: none;color: skyblue;float: right;">
                                修改
                            </button>
                            
                        </span>
                    </p>
            </div>

            <!-- 地区 -->
            <!-- <div>
                <b>
                    <p>
                            <van-field readonly clickable label="选择地区" :value="valueArea" placeholder="请选择所在地区" @click="bindShow" />

                        <van-popup v-model="showArea" position="bottom" :style="{ height: '40%' }">
                            <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="bindCancel" />
                        </van-popup>
                    </p>
                </b>
            </div> -->

            <!-- 简介 -->
            <div>
                简介:
            </div>
            <input id="content" placeholder="快填写简介认识更多的朋友吧！！！" contenteditable="true" style="border:1px solid rgb(245 245 247);height:25%;outline:none;width:100%;"/>
            <p>
                <button @click="editpersoninformation()" class="yeseditbtn">
                    确认修改
                </button>
                
            </p>

        </div>
        <p id="userid" style="display:none">

        </p>
       
    </div>
</template>

<script>

import Area from '../common/Area.vue'

import birsthday from "../common/Bristhday.vue"
import school from "../common/School.vue"
import Tc from "../common/Tc.vue"

import axios from 'axios'

import gender from "../common/Gender.vue"

import  AeraInfo  from '../common/js/area.js';


import jwtDecode from 'jwt-decode'

export default {
    name:'Personinformation',
    components:{
        Area,birsthday,Tc,gender,school
    },
    data(){
        return{
            headimg:false,
            personinformation:[],
            sex:'',
            show: false,
            areaList: AeraInfo, //引用地区信息
            showArea: false,
            valueArea: '', //地区值
            arrArea: [], //存放地区数组
            checked: false,
            toReport: true,
            messageList:["男","女"]
        }
    },
    mounted(){
        //进行修改用户的学校
        document.getElementById("school").onchange=function(){
            console.log(this.value)
            //选择之后直接进行修改用户学校的接口
            axios({
                url:'/users/updateUsers',
                method:'put',
                params:{
                    school:this.value,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                }
            }).then(data=>{
                console.log(data)
                // this.$router.go(0)

            }).catch(err=>{
                console.log(err)
            })


        }
        //进行修改用户的年龄
        document.getElementById("age").onchange=function(){
            console.log(this.value)
            //选择之后直接进行修改用户学校的接口
            axios({
                url:'/users/updateUsers',
                method:'put',
                params:{
                    age:this.value,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                }
            }).then(data=>{
                console.log(data.data.data.age)
                // this.$router.go(0)

            }).catch(err=>{
                console.log(err)
            })


        }
        let token=sessionStorage.getItem("token")
        const decode =  jwtDecode(token);
        console.log(decode)//exp   flag password sex userId username
        var userid  = document.getElementById("userid");
        userid.innerHTML=decode.userId;

        //查询用户信息
        axios({
            url:`/users/queryUsers?userId=${userid.innerHTML}`,
            method:'get',
            headers:{
                'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
            }
        }).then(data => {
            console.log(data.data.data)
            this.personinformation.push = data.data.data;
            console.log(this.personinformation)

            //遍历昵称nickname 遍历生日birthday 遍历性别sex 遍历地区 遍历简介profile 遍历身份roles 
            //遍历背景图 bgImg 遍历头像img 遍历年龄age 主题颜色 color
            //遍历头像
             var personformationimg = document.getElementById("personformationimg")
             personformationimg.src=data.data.data.img
             //遍历昵称
             var nickname =document.getElementById("nickname")
             nickname.value=data.data.data.nickname
             //遍历性别
             console.log(data.data.data.sex)
             console.log("99999999999999999999")
             var gender = document.getElementById("gender");
             gender.value="性别:"+data.data.data.sex

             //遍历简介
             var content = document.getElementById("content");
             content.value=data.data.data.profile
             //遍历年龄
             var age  = document.getElementById("age");
             //让select选中这个年龄option
              document.getElementById('age').value=data.data.data.age;
             console.log(data.data.data.age)
             //遍历学校
             document.getElementById('school').value=data.data.data.school;
             console.log(data.data.data.school)

        }).catch(err => {
            console.log(err)
        })
    },
    methods:{

        //进行更换头像
        changeheadimg(){
            console.log("111111111")
            console.log(this.headimg)
            this.headimg=true  
        },
        //隐藏更改头像的框
        hideheadimg(){
            this.headimg=false 
        },
        //进行修改头像的接口   来这里
        uploadImg() {
            var img = document.getElementById("headimginput").files[0]
            console.log(img)
                          
            let config = {
                headers: {
                   'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                    'Content-Type': 'multipart/form-data',
                    'contentType': "application/json"
                },
            }
            var formData = new FormData()
            formData.append('userId',30)
            formData.append('img', img)

            axios.post('/users/updateImg', formData, config)
            .then(data => {
                if(data.data.code===20000){
                    console.log("成功修改头像")
                    this.headimg=false 
                    //进行刷新头像
                      this.$router.go(0)
                    // 提示修改头像成功
        axios({
            url:`/users/queryUsers?userId=${userid.innerHTML}`,
            method:'get',
            headers:{
                'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
            }
        }).then(data => {
            console.log(data.data.data)
            this.personinformation.push = data.data.data;
            console.log(this.personinformation)

            //遍历昵称nickname 遍历生日birthday 遍历性别sex 遍历地区 遍历简介profile 遍历身份roles 
            //遍历背景图 bgImg 遍历头像img 遍历年龄age 主题颜色 color
            //遍历头像
             var personformationimg = document.getElementById("personformationimg")
             personformationimg.src=data.data.data.img
             //遍历昵称
             var nickname =document.getElementById("nickname")
             nickname.value=data.data.data.nickname
             //遍历性别
             var gender = document.getElementById("gender");
             gender.value="性别:"+data.data.data.sex

             //遍历简介
             var content = document.getElementById("content");
             content.value=data.data.data.profile
             
        }).catch(err => {
            console.log(err)
        })

        //来这里
        }else{
            console.log("1111111");
        }
            }).catch(err => {
                console.log(err)
                formData.forEach((value, key) => {
                    console.log(`key ${key}: value ${value}`);
                })
            })

    
   
        },

        //修改用户昵称
        editnickname(){
            var editnickname = document.getElementById("editnickname");
            var nickname = document.getElementById("nickname");
            var yeseditnickname= document.getElementById("yeseditnickname");
            if(editnickname.innerHTML==" 修改 "){
                console.log("1111111111")
                nickname.style.border="1px solid  rgb(245 245 247)"
                editnickname.innerHTML="取消"
                yeseditnickname.style.display="block"
            }else{
                console.log("22222222222222222")
                nickname.style.border="none"
                editnickname.innerHTML=" 修改 "
                yeseditnickname.style.display="none"
            }

        },
        //确认修改用户昵称
        //修改用户信息的接口
        yesnickname(){
            var nickname   = document.getElementById("nickname")
             var nickname =document.getElementById("nickname")
            axios({
                url:'/users/updateUsers',
                method:'put',
                params:{
                    nickname:nickname.value,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                }
            }).then(data=>{
                console.log(data)
                this.$router.go(0)

            }).catch(err=>{
                console.log(err)
            })
        },
        //确认修改个人信息
        editpersoninformation(){
            var content = document.getElementById("content");
            axios({
                url:'/users/updateUsers',
                method:'put',
                params:{
                    profile:content.value,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                }
            }).then(data=>{
                console.log(data)
                //修改简介成功,进行遍历新的简介
                this.$router.go(0)

            }).catch(err=>{
                console.log(err)
            })


        },
        //进行选择个人信息以及修改个人信息！！！！！
        
        showPopup() {
            this.show = true;
        },
        bindShow(){
            this.showArea= true;
        },
        bindCancel(){
            this.showArea= false;
        },
        //地区选择
        onAreaConfirm(val) {
            this.showArea = false;
            this.arrArea = val;
            var addrInfo = val[0].name + '-' + val[1].name + '-' + val[2].name;
            this.valueArea = addrInfo
        },
    },
    props:[
        'number'
    ],

}
</script>

<style lang="less" scoped>
*{
    padding: 0px;
    margin: auto;
}
html,body{
    height: 100%;
}
.Top{
    padding: 0.2rem;

}
.headimg{
    background-image: url("../../assets/img/personpiture.png");
    background-size: cover;
    width:100%;
    height:8rem;
    .headimgdiv{
        position: absolute;
    margin-left: 40%;
    margin-top: 35%;
        width: 20%;
        height: 10%;
    }
    .changebtn{
                background-color: gray;
                padding: 0.2rem;
                border-radius: 0.2rem;
                color:white;
                border: none;
                outline: none;
                float: right;
                margin-right: 5%;
                margin-top: 65%;
                .btn{
                    width: 20%;
                    margin: 0.5rem;
                    padding: 0.2rem;
                    color: white;
                    background-color: burlywood;
                    outline: none;
                    border: none;

                }
            span{
                display: inline-block;
            }
    }
    .changeheadimgbtn{
        background-color: gray;
        padding: 0.2rem;
        // border-radius: 0.2rem;
        color: white;
        border: none;
        outline: none;
        // float: right;
        // margin-right: -21%;
        // margin-top: 50%;
        span{
            display: inline-block;
        }
    }
    .changeallimg{
        background-color: transparent;
        color:white;
        border: none;
        outline: none;
    }
}
.personmessage{
    height: 70%;
    border: 1px solid rgb(245 245 247);
    // background-color: pink;
    div{
        color: black;
        // border: 1px solid rgb(245 245 247);
        height: 7%;
        // padding-top: 0.3rem;
        padding-left: 0.1rem;
        .personmessagetext{
            float: left;
        }
        input{
            margin-top: 0.7%;
            text-align: right;
            float: left;
            width: 50%;
            margin-left: 5%;
            border: none;
            height: 100%;
        }
        .iconfont{
            float: right;
        }
    }
}
.yeseditbtn{
    background-color: coral;
    // background-color: rgb(246, 215, 197);
    color: white;
    width: 60%;
    padding: 0.2rem;
    border-radius: 0.5rem;
    margin-left: 20%;
    outline: none;
    border: none;
}
</style>